<template>
	<div class="mp-page">
		<van-swipe @change="onChange">
			<van-swipe-item v-for="item in bannerList">
				<img
					:src="item"
					:alt="item"
					style="width: 100%"
				/>
			</van-swipe-item>
			<template #indicator>
				<ul class="custom-indicator">
					<li
						v-for="item in bannerList.length"
						:class="{ 'cur-item': current + 1 === item }"
					></li>
				</ul>

				<div class="banner-title">
					<span>出发地:西安</span>
					<span>云途文旅</span>
				</div>
			</template>
		</van-swipe>

		<div class="mp-pdcard-con">
			<h3 class="mp-pdcard-name">
				<img
					src="https://img1.qunarzz.com/piao/fusion/1809/70/f3353b80b6b82602.jpg"
					alt=""
					class="mp-qplusicon"
				/>
				【可选长恨歌/晚出发团】兵马俑+华清宫骊山一日游/赠特色早餐/汉服体验/分餐制/深度讲解/无线耳麦
			</h3>
			<div class="mp-pdcard-pricecon">
				<em class="mp-prdcard-priceicon">¥</em>
				<span class="mp-prdcard-pricetext">155</span>
				<span class="mp-prdcard-gray">起</span>
				<span class="mp-bookingahead-text mp-border">可订明日</span>
				<span
					class="mp-bookingahead-text mp-border mp-bookinghead-refund-desc"
					id="refundDesc"
					>退改无忧</span
				>
				<span class="mp-prdcard-supplier">月售:2583</span>
			</div>
			<div class="mp-price-tagcon"></div>
			<ul class="mp-prdcard-marketing"></ul>

			<div class="mp-prdcard-tagcon">
				<div class="mp-prdcard-tag-item">
					<span class="mp-prdcard-tag-icon mpg-iconfont">🚫</span>
					<span class="mp-prdcard-tag-desc">铁定成团</span>
				</div>
				<div class="mp-prdcard-tag-item">
					<span class="mp-prdcard-tag-icon mpg-iconfont">🤑</span>
					<span class="mp-prdcard-tag-desc">无自费</span>
				</div>
				<div class="mp-prdcard-tag-item">
					<span class="mp-prdcard-tag-icon mpg-iconfont">🤮</span>
					<span class="mp-prdcard-tag-desc">无购物</span>
				</div>
			</div>

			<div class="mp-prdcard-marketing mp-border-top">
				<div class="mp-prdcard-market-item">
					<span class="mp-prdcard-market-label mp-border">礼</span>
					<div class="mp-prdcard-market-desc">免费使用双景区无线耳麦</div>
				</div>
				<div class="mp-prdcard-market-item">
					<span class="mp-prdcard-market-label mp-border">礼</span>
					<div class="mp-prdcard-market-desc">半日游套餐赠送手工皮影纪念品</div>
				</div>
				<div class="mp-prdcard-market-item">
					<span class="mp-prdcard-market-label mp-border">礼</span>
					<div class="mp-prdcard-market-desc">一日游套餐赠特色中餐</div>
				</div>
				<div class="mp-prdcard-market-item">
					<span class="mp-prdcard-market-label mp-border">礼</span>
					<div class="mp-prdcard-market-desc">一日游赠送临潼博物馆</div>
				</div>
				<div class="mp-prdcard-market-item">
					<span class="mp-prdcard-market-label mp-border">礼</span>
					<div class="mp-prdcard-market-desc">一日游赠送汉服体验</div>
				</div>
				<div class="mp-prdcard-market-item">
					<span class="mp-prdcard-market-label mp-border">礼</span>
					<div class="mp-prdcard-market-desc">一日游赠送早餐腊牛肉夹馍</div>
				</div>
			</div>
		</div>

		<div class="mp-servicebar">
			<span class="service-title">服务</span>
			<span class="mp-servicebar-item mp-servicebar-item1 sight-hotel"
				>立即确认</span
			>
			<span class="mp-iconfont mp-servicebar-arrowicon">➡️</span>
		</div>

		<div
			class="mp-commentsinfo-con"
			style="margin-bottom: 0"
			@click.prevent="$router.push('/comment')"
		>
			<a
				href="#"
				class="mp-linkarea"
				mp-role="mp-select-comment"
			>
				<span class="mp-commentswell-score">5.0</span>
				<span class="mp-commentswell-text">分</span>
				<span class="mp-commentswell-desc">非常满意</span>
				<span class="mp-comments-totalnum"
					>39304条评论
					<span class="mp-comments-rightarrow">➡️</span>
				</span>
			</a>
		</div>

		<div class="mp-commentswell-contentcon">
			<a
				href="#"
				@click.prevent="$router.push('/comment')"
			>
				<div class="mp-comments-item">
					<div class="mp-commentswell-level">
						<div class="mp-commentswell-imgcon">
							<img
								class="mp-commentswell-userimg"
								src="//qcommons.qunar.com/headshot/headshotsById/161374401.png?ssl=true&amp;l"
								style=""
							/>
						</div>
						<span class="mp-commentswell-user">w*6</span>
						<span class="mp-commentswell-date">&nbsp;&nbsp;2023-11-07</span>
					</div>
					<p class="mp-wellcomments-text mp-ellipsis2">
						安排的司机，叫镜哥，风趣幽默，一路上说说笑笑，很不错
					</p>
				</div>
			</a>
		</div>

		<div
			class="mp-merchant-wrap"
			style="
				background: #fff url() no-repeat;
				width: 100%;
				background-size: 100% 100%;
			"
		>
			<a
				href="#"
				class="mp-linkarea"
			>
				<div class="mp-merchant-title">
					<div
						class="mp-merchant-header"
						mp-role="merchantHeader"
					>
						<div
							class="mp-merchant-name"
							mp-role="merchantName"
						>
							霞客行旅游
						</div>
						<div
							class="mp-merchant-level-wrap"
							mp-role="merchantLevelWrap"
						>
							<img
								class="mp-merchant-level-img"
								src="https://s.qunarzz.com/piao/image/touch/daytrip/crown.png"
								style=""
							/>
						</div>
					</div>
					<!-- <span class="mp-iconfont mp-merchant-rightarrow">&#xf3cc;</span> -->
					<div class="mp-merchant-button">
						<span>进店逛逛</span>
					</div>
				</div>
				<div class="mp-merchant-fullname"></div>
			</a>
		</div>

		<van-tabs v-model="active">
			<van-tab title="行程简介">
				<div class="mp-prddetail-group">
					<div class="mp-card-group">
						<div class="mp-card">
							<h3 class="mp-module-title">行程亮点</h3>
							<div class="mp-card-content">
								<p class="mp-card-desc">
									无购物，真正纯玩团，赠送纪念章和矿泉水<br />延安市区酒店免费接送，省去舟车劳顿。<br />可代订【红秀延安】【延安保育院】【再回延安】演出票
								</p>
							</div>
						</div>
					</div>

					<div class="routeDetailContainer">
						<div class="mp-route-head">
							<h3 class="mp-module-title">行程安排</h3>
						</div>

						<div
							class="mp-route-detailbtn mp-extend mp-route-detailbtn-fixed"
							mp-role="routeDetailBtn"
							style="bottom: 120px"
						></div>

						<div mp-role="tabContent">
							<div class="mp-prddetail-content mp-timeline">
								<div class="mp-prddetail-routeitem">
									<span class="mp-prddetail-date">07:30</span>
									<div class="mp-verticalline mp-dark-dash mp-prddetail-route">
										<span class="mp-timeline-nodeicon"></span>
										<span class="mp-route-title"
											><strong>集合地点</strong>:</span
										>
										<span class="mp-route-title">延安市区沿途接</span>
										<div mp-role="routeItemDesc">
											<div class="mp-route-infos">
												<p class="mp-route-desc"></p>
											</div>
										</div>
									</div>
								</div>
								<div class="mp-prddetail-routeitem">
									<span class="mp-prddetail-date">07:30</span>
									<div class="mp-verticalline mp-dark-dash mp-prddetail-route">
										<span class="mp-timeline-nodeicon"></span>
										<span class="mp-route-title"><strong>交通</strong>:</span>
										<span class="mp-route-title">到延安市区内各酒店接</span>
										<div mp-role="routeItemDesc">
											<div class="mp-route-infos">
												<p class="mp-route-time">行驶时间：约45分钟</p>
												<p class="mp-route-desc">
													温馨提示：国庆期间人多车多，因路程较远，假期道路拥挤高速堵车属不可预测以及控制的情况，【返程时间以及游览时间无法保证！！建议游客不要选择当天乘坐火车或飞机返程！】
													接送时间存在出入还请做好心理准备，耐心等待哦。
												</p>
											</div>
										</div>
									</div>
								</div>
								<div class="mp-prddetail-routeitem">
									<span class="mp-prddetail-date">08:00</span>
									<div class="mp-verticalline mp-dark-dash mp-prddetail-route">
										<span class="mp-timeline-nodeicon"></span>
										<span class="mp-route-title"><strong>交通</strong>:</span>
										<span class="mp-route-title">乘车前往南泥湾</span>
										<div mp-role="routeItemDesc">
											<div class="mp-route-infos">
												<p class="mp-route-time">行驶时间：约30分钟</p>
												<p class="mp-route-desc"></p>
											</div>
										</div>
									</div>
								</div>
								<div class="mp-prddetail-routeitem">
									<span class="mp-prddetail-date">08:45</span>
									<div class="mp-verticalline mp-dark-dash mp-prddetail-route">
										<span class="mp-timeline-nodeicon"></span>
										<span class="mp-route-title"
											><strong>游览景点</strong>:</span
										>
										<a
											class="mp-route-titlelink"
											href="https://m.flight.qunar.com/shark/active/cc16868c594f193f4d7f198d810db018?channel=touch&amp;sightId=6120&amp;cat=from_area%3Dspu_sightintroduce"
										>
											<span class="mp-route-title">南泥湾革命旧址</span>
										</a>
										<div mp-role="routeItemDesc">
											<div class="mp-route-imgcon">
												<img
													class="mp-route-imgitem"
													data-original-src="https://imgs.qunarzz.com/sight/p0/201303/11/32b297bf0903614ec8d65eac.jpg_260x148_75fe0d55.jpg"
													mp-role="lazyloadImg"
													data-bigimg="https://imgs.qunarzz.com/sight/p0/201303/11/32b297bf0903614ec8d65eac.jpg"
													data-title="南泥湾革命旧址"
													src="https://imgs.qunarzz.com/sight/p0/201303/11/32b297bf0903614ec8d65eac.jpg_260x148_75fe0d55.jpg"
													style=""
												/>
												<img
													class="mp-route-imgitem"
													data-original-src="https://qimgs.qunarzz.com/piao_qsight_provider_piao_qsight_web/c0b64ae12a07a3bac8d65eac.jpg_260x148_21744d41.jpg"
													mp-role="lazyloadImg"
													data-bigimg="https://qimgs.qunarzz.com/piao_qsight_provider_piao_qsight_web/c0b64ae12a07a3bac8d65eac.jpg"
													data-title="南泥湾革命旧址"
													src="https://qimgs.qunarzz.com/piao_qsight_provider_piao_qsight_web/c0b64ae12a07a3bac8d65eac.jpg_260x148_21744d41.jpg"
													style=""
												/>
											</div>
											<div class="mp-route-infos">
												<p class="mp-route-time">活动时间：约30分钟</p>
												<p class="mp-route-desc">
													359旅大生产开荒基地陕北的好江南--【 南泥湾
													】参观20分钟。
												</p>
											</div>
										</div>
									</div>
								</div>
								<div class="mp-prddetail-routeitem">
									<span class="mp-prddetail-date">09:00</span>
									<div class="mp-verticalline mp-dark-dash mp-prddetail-route">
										<span class="mp-timeline-nodeicon"></span>
										<span class="mp-route-title"><strong>交通</strong>:</span>
										<span class="mp-route-title">乘车前往北京知青故居</span>
										<div mp-role="routeItemDesc">
											<div class="mp-route-infos">
												<p class="mp-route-time">行驶时间：约2小时</p>
												<p class="mp-route-desc">
													乘车前往北京知青故居，途中参观黄土高原观景台，下车参观.
												</p>
											</div>
										</div>
									</div>
								</div>
								<div class="mp-prddetail-routeitem">
									<span class="mp-prddetail-date">12:00</span>
									<div class="mp-verticalline mp-dark-dash mp-prddetail-route">
										<span class="mp-timeline-nodeicon"></span>
										<span class="mp-route-title"
											><strong>游玩项目</strong>:</span
										>
										<span class="mp-route-title">用午餐（自理）</span>
										<div mp-role="routeItemDesc">
											<div class="mp-route-infos">
												<p class="mp-route-time">活动时间：约1小时</p>
												<p class="mp-route-desc"></p>
											</div>
										</div>
									</div>
								</div>
								<div class="mp-prddetail-routeitem">
									<span class="mp-prddetail-date">13:00</span>
									<div class="mp-verticalline mp-dark-dash mp-prddetail-route">
										<span class="mp-timeline-nodeicon"></span>
										<span class="mp-route-title"><strong>交通</strong>:</span>
										<span class="mp-route-title">乘车前往壶口瀑布</span>
										<div mp-role="routeItemDesc">
											<div class="mp-route-infos">
												<p class="mp-route-time">行驶时间：约40分钟</p>
												<p class="mp-route-desc"></p>
											</div>
										</div>
									</div>
								</div>
								<div class="mp-prddetail-routeitem">
									<span class="mp-prddetail-date">13:00</span>
									<div class="mp-verticalline mp-dark-dash mp-prddetail-route">
										<span class="mp-timeline-nodeicon"></span>
										<span class="mp-route-title"
											><strong>游览景点</strong>:</span
										>
										<a
											class="mp-route-titlelink"
											href="https://m.flight.qunar.com/shark/active/cc16868c594f193f4d7f198d810db018?channel=touch&amp;sightId=10524&amp;cat=from_area%3Dspu_sightintroduce"
										>
											<span class="mp-route-title">壶口瀑布</span>
										</a>
										<div mp-role="routeItemDesc">
											<div class="mp-route-imgcon">
												<img
													class="mp-route-imgitem"
													data-original-src="https://imgs.qunarzz.com/sight/p0/1505/b6/b691b2e22a915ea0.water.jpg_260x148_fd11583b.jpg"
													mp-role="lazyloadImg"
													data-bigimg="https://imgs.qunarzz.com/sight/p0/1505/b6/b691b2e22a915ea0.water.jpg"
													data-title="壶口瀑布"
													src="https://imgs.qunarzz.com/sight/p0/1505/b6/b691b2e22a915ea0.water.jpg_260x148_fd11583b.jpg"
													style=""
												/>
												<img
													class="mp-route-imgitem"
													data-original-src="https://imgs.qunarzz.com/sight/p0/1912/1f/1f867cfda52850bca3.img.jpg_260x148_94af9cef.jpg"
													mp-role="lazyloadImg"
													data-bigimg="https://imgs.qunarzz.com/sight/p0/1912/1f/1f867cfda52850bca3.img.jpg"
													data-title="壶口瀑布"
													src="https://imgs.qunarzz.com/sight/p0/1912/1f/1f867cfda52850bca3.img.jpg_260x148_94af9cef.jpg"
													style=""
												/>
											</div>
											<div class="mp-route-infos">
												<p class="mp-route-time">活动时间：约1小时30分钟</p>
												<p class="mp-route-desc">
													参观天下黄河一壶收、世界一大黄色瀑布奇观-【
													黄河壶口瀑布 】60-90分钟
												</p>
											</div>
										</div>
									</div>
								</div>
								<div class="mp-prddetail-routeitem">
									<span class="mp-prddetail-date">15:15</span>
									<div class="mp-verticalline mp-dark-dash mp-prddetail-route">
										<span class="mp-timeline-nodeicon"></span>
										<span class="mp-route-title"><strong>交通</strong>:</span>
										<span class="mp-route-title">乘车返回延安市区</span>
										<div mp-role="routeItemDesc">
											<div class="mp-route-infos">
												<p class="mp-route-time">行驶时间：约3小时</p>
												<p class="mp-route-desc"></p>
											</div>
										</div>
									</div>
								</div>
								<div class="mp-prddetail-routeitem">
									<span class="mp-prddetail-date">18:30</span>
									<div class="mp-verticalline mp-dark-dash mp-prddetail-route">
										<span class="mp-timeline-nodeicon"></span>
										<span class="mp-route-title"><strong>返程</strong>:</span>
										<span class="mp-route-title">行程结束后将送回上车地点</span>
										<div mp-role="routeItemDesc">
											<div class="mp-route-infos">
												<p class="mp-route-desc"></p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</van-tab>
			<van-tab title="费用说明"></van-tab>
			<van-tab title="使用说明"></van-tab>
		</van-tabs>

		<van-goods-action>
			<van-goods-action-icon
				icon="cart-o"
				text="购物车"
				@click="onClickIcon"
			/>

			<van-goods-action-button
				type="danger"
				text="立即购买"
				@click="onClickButton"
			/>
		</van-goods-action>

		<van-popup
			position="bottom"
			:style="{ height: '70%' }"
			v-model="show"
		>
			<div class="wrap__submit">
				<div></div>
				<span class="wrap__submit__title">
					【可选✿12人小团/头等舱大巴团
					三环内酒店接】华山一日游✿赠送KFC早餐✿登山礼包✿享贵宾休息室
				</span>
			</div>

			<div class="submit__content">
				<div class="submit__top">
					<h5>选择日期</h5>
					<div class="data__card__list">
						<div class="cart__item">今天</div>
						<div class="cart__item">明天</div>
						<div class="cart__item">后天</div>
						<div class="cart__item">替他日期</div>
					</div>
				</div>
			</div>

			<div class="booking__text__cart">
				<h5>选择日期</h5>
			</div>

			<van-submit-bar
				:price="3050"
				button-text="提交订单"
				@submit="onSubmit"
			/>
		</van-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				current: 0,
				show: false,
				bannerList: [
					'https://imgs.qunarzz.com/p/tts6/2101/21/0a0305df2aa65302.jpg_750x440_0f341309.jpg',
					'https://imgs.qunarzz.com/p/tts5/2103/b4/29b672be92414302.jpg_750x440_8857f442.jpg',
					'https://imgs.qunarzz.com/p/tts0/2101/16/80fffff2fe084202.jpg_750x440_29ad0bfb.jpg',
					'https://imgs.qunarzz.com/p/tts0/2101/94/514cecf1a18cb202.jpg_750x440_42fae9aa.jpg',
					'https://imgs.qunarzz.com/p/tts8/2101/bf/62b5d1e890677002.jpg_750x440_446eafa6.jpg',
				],
			};
		},
		methods: {
			onChange(index) {
				this.current = index;
			},

			onClickIcon() {
				// Toast('点击图标');
			},
			onClickButton() {
				// Toast('点击按钮');
				this.show = true;

				console.log(this.show);
			},
			onSubmit() {
				console.log(123);
			},
		},
	};
</script>

<style scoped>
	.van-submit-bar__text {
		text-align: left;
	}
	.mp-page {
		background-color: #eee;
	}
	.van-swipe {
		/* height: 400px; */
		overflow: hidden;
	}

	.custom-indicator {
		position: absolute;
		right: 14px;
		bottom: 16px;
		padding: 2px 5px;
		font-size: 12px;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.custom-indicator li {
		width: 6px;
		height: 6px;
		border-radius: 3px;
		background-color: rgba(255, 255, 255, 0.5);
		transition: width 0.3s;
	}

	.custom-indicator .cur-item {
		width: 20px;
		background-color: #00afc7;
	}

	.banner-title {
		position: absolute;
		left: 14px;
		bottom: 11px;
	}

	.banner-title span {
		color: #fff;
		line-height: 17px;
		font-size: 12px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.banner-title span:last-child {
		margin-left: 17px;
	}

	.mp-pdcard-con {
		padding: 12px 10px 0;
		background-color: #fff;
	}

	.mp-pdcard-name {
		overflow: hidden;
		color: #212121;
		font-size: 18px;
		line-height: 22px;
		text-overflow: ellipsis;
		font-weight: normal;
	}

	.mp-pdcard-name .mp-qplusicon {
		height: 14px;
		margin-top: -4px;
		margin-right: 6px;
	}

	.mp-prdcard-priceicon {
		color: #ff5858;
		font-size: 12px;
		font-style: normal;
	}

	.mp-prdcard-pricetext {
		color: #ff5858;
		font-size: 24px;
	}

	.mp-prdcard-gray {
		color: #9e9e9e;
		font-size: 12px;
	}

	.mp-bookingahead-text {
		padding: 1px 5px 0;
		height: 14px;
		color: #9e9e9e;
		font-size: 10px;
		line-height: 14px;
		margin-left: 8px;
		vertical-align: 1px;
		position: relative;
	}

	.mp-bookingahead-text.mp-border::before {
		background-color: #ddd;
		border-radius: 4px;
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid rgba(255, 255, 255, 0.5);
	}

	.mp-bookinghead-refund-desc {
		font-weight: bold;
		color: #00ae73;
		font-size: 10px;
		line-height: 14px;
	}

	.mp-prdcard-supplier {
		float: right;
		height: 0.24rem;
		margin-top: 0.2rem;
	}

	/* 铁定成团 */

	.mp-prdcard-tagcon {
		display: flex;
		gap: 10px;
		align-items: center;
		font-size: 12px;
		line-height: 17px;
		margin-bottom: 10px;
	}

	.mp-prdcard-marketing {
		padding-bottom: 10px;
	}

	.mp-prdcard-market-item {
		position: relative;
		padding: 3px 0;
		line-height: 17px;
	}

	.mp-prdcard-market-label {
		float: left;
		box-sizing: border-box;
		padding: 3px;
		height: 17px;
		line-height: 12px;
		text-align: center;
		color: #f55;
		border: 1px solid #f55;
		border-radius: 2px;
	}

	.mp-prdcard-market-desc {
		padding-left: 8px;
		color: #616161;
		overflow: hidden;
	}

	.mp-servicebar {
		position: relative;
		margin-top: 10px;
		padding: 16px 10px;
		background-color: #fff;
	}

	.service-title {
		font-size: 8px;
		color: #666;
	}

	.mp-servicebar-item {
		overflow: hidden;
		line-height: 13px;
		color: #333;
	}

	.mp-iconfont {
		position: absolute;
		top: 17px;
		right: 10px;
	}

	.mp-commentsinfo-con {
		position: relative;
		margin-top: 10px;
		padding-top: 1px;
		background-color: #fff;
		line-height: 40px;
	}

	.mp-commentswell-score {
		margin-left: 10px;
		line-height: 24px;
		font-size: 18px;
		color: #ff8300;
	}

	.mp-commentswell-text {
		color: #ff8300;
		font-size: 12px;
	}

	.mp-commentswell-desc {
		font-size: 12px;
		line-height: 18px;
		margin-left: 5px;
	}

	.mp-comments-totalnum {
		float: right;
		margin-right: 10px;
		line-height: 24px;
		font-size: 12px;
		color: #ff8300;
	}

	.mp-commentswell-contentcon {
		position: relative;
		background: #fff;
		padding: 0 10px 4px;
		margin-top: 12px;
	}

	.mp-comments-item {
		padding: 10px 0;
	}

	.mp-commentswell-level {
		overflow: hidden;
		color: #9e9e9e;
		font-size: 12px;
		line-height: 36px;
	}

	.mp-commentswell-imgcon {
		float: left;
		overflow: hidden;
		width: 36px;
		height: 36px;
		border-radius: 36px;
	}

	.mp-commentswell-user {
		margin-left: 10px;
	}

	.mp-commentswell-date {
		float: right;
	}

	.mp-wellcomments-text.mp-ellipsis2 {
		line-height: 20px;
	}

	.mp-wellcomments-text {
		margin-top: 12px;
		color: #212121;
		font-size: 12px;
	}

	.mp-merchant-wrap {
		padding: 15px 10px;
		background: #fff;
		margin-top: 10px;
		box-sizing: border-box;
	}

	.mp-merchant-level-img {
		width: 16px;
		height: 16px;
		margin-right: 4px;
	}

	.mp-merchant-title {
		align-items: center;
		display: flex;
	}

	.mp-merchant-header {
		flex: 1;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		overflow: hidden;
	}

	.mp-merchant-name {
		padding-right: 7px;
		padding-left: 4px;
		color: rgb(51, 51, 51);
		font-size: 16px;
		line-height: 16px;
	}

	.mp-merchant-button {
		background-color: #000;
		color: #fff;
		font-size: 12px;
		box-shadow: 0 0 1px 1px #000;
		border-radius: 30px;
		padding: 5px 10px;
	}

	.van-tabs {
		margin-top: 10px;
	}
	.mp-prddetail-group {
		background-color: #fff;
		padding-bottom: 0.05px;
	}

	.mp-card-group {
	}

	.mp-card {
		padding: 24px 12px 30px;
	}

	.mp-module-title {
		position: relative;
		color: #616161;
		font-size: 18px;
		line-height: 25px;
		text-indent: 10px;
	}

	.mp-module-title::before {
		content: '';
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		background: #00bcd4;
		width: 3px;
		height: 10px;
		border-radius: 3px;
	}

	.mp-card-content {
		padding: 10px 0 0;
	}

	.mp-card-desc {
		color: #212121;
		font-size: 14px;
		line-height: 26px;
		max-height: 78px;
		overflow: hidden;
	}

	.routeDetailContainer {
	}

	.mp-route-head {
		padding: 0 12px;
	}

	.mp-route-detailbtn.mp-extend {
		background-position: 5px -8px;
	}

	.mp-route-detailbtn-fixed {
		display: block;
		position: fixed;
		right: 0;
	}

	.mp-route-detailbtn.mp-extend {
		display: block;
		z-index: 4;
		width: 61px;
		height: 61px;
		background: url(//s.qunarzz.com/piao/image/touch/daytrip/detail.png) 5px -21.33rem /
			80px 205px no-repeat;

		bottom: 120px;
		position: fixed;
		right: 0;
	}

	.mp-timeline {
		padding: 10px 12px 0;
	}

	.mp-prddetail-content {
		overflow: hidden;
		color: #616161;
		font-size: 14px;
		line-height: 20px;
	}

	.mp-timeline {
		padding: 10px 12px 0;
	}
	.mp-prddetail-content {
		color: #616161;
		font-size: 14px;
		line-height: 20px;
		overflow: hidden;
	}

	.mp-prddetail-routeitem {
		padding-bottom: 20px;
	}

	.mp-prddetail-routeitem:not(:last-child) {
		padding-bottom: 20px;
	}

	.mp-prddetail-routeitem {
		overflow: hidden;
		min-height: 1%;
	}

	.mp-route-imgitem {
		overflow: hidden;
		display: inline-block;
		width: 130px;
		height: 74px;
		background: #eee;
		margin-right: 10px;
	}

	.wrap__submit {
		padding: 0 10px;
		font-size: 17px;
		line-height: 25px;
		overflow: hidden;
		border-top: solid 1px #eee;
		position: relative;
	}

	.wrap__submit__title {
		display: block;
		padding: 15px 0 10px;
		margin-right: 30px;
	}

	.submit__top {
		margin: 9px 10px 0;
		padding-bottom: 15px;
	}

	.data__card__list {
		display: flex;
		gap: 12px;
		padding-top: 10px;
	}

	.cart__item {
		width: 80px;
		height: 43px;
		border-radius: 10px;
		border: 1px solid #bdbdbd;
		font-size: 14px;
		line-height: 43px;
		text-align: center;
	}

	.booking__text__cart {
		margin: 0 10px;
		padding-bottom: 15px;
	}

	.booking__text__cart h5 {
	}
</style>
